<template>
  <view class="content">
    <view
      style="
        font-size: 30rpx;
        color: #454e64;
        font-weight: 600;
        margin-bottom: 10rpx;
      "
      >{{ data.jhrw_zz }}</view
    >
    <view style="font-size: 28rpx; color: #454e64"
      >设备名称：{{
        data.jhrw_sbmc ? data.jhrw_sbmc + `(${data.jhrw_sn})` : "--"
      }}</view
    >
    <view style="font-size: 28rpx; color: #454e64; margin-bottom: 16rpx"
      >任务地址：{{ data.jhrw_rwdz || "--" }}</view
    >
    <text
      v-if="data.jhrw_rwjd"
      style="font-size: 28rpx; color: #01b7fc"
      @click="map"
      >查看地图位置</text
    >
    <view v-if="data.gd_status != 0">
      <view style="margin-top: 32rpx" v-if="data.status == '0'">
        <label
          @click="param.zcyc = 'y'"
          style="margin-right: 40rpx"
          class="radio"
        >
          <radio
            style="transform: scale(0.7)"
            :checked="param.zcyc == 'y'"
          />正常</label
        >
        <label @click="param.zcyc = 'n'" class="radio"
          ><radio
            style="transform: scale(0.7)"
            :checked="param.zcyc == 'n'"
          />异常</label
        >
        <label
          @click="goInspectFault"
          v-show="param.zcyc == 'n'"
          style="margin-left: 60rpx; color: #357fda"
          >{{ fault.gzms ? "修改" : "添加" }}故障单</label
        >
        <image
          v-show="param.zcyc == 'n' && fault.gzms"
          @click="resetFault"
          style="width: 30rpx; height: 30rpx; margin: 0rpx 0 0 30rpx"
          src="@/static/image/jian.png"
        />
      </view>
      <view style="margin-top: 32rpx" v-else>
        <label style="margin-right: 40rpx" class="radio"
          ><radio
            disabled
            style="transform: scale(0.7)"
            :checked="param.zcyc == 'y'"
          />正常</label
        >
        <label class="radio"
          ><radio
            disabled
            style="transform: scale(0.7)"
            :checked="param.zcyc == 'n'"
          />异常</label
        >
      </view>
      <view
        style="margin: 20rpx 0 10rpx 0; color: #01b7fc"
        v-if="data.status == '0'"
        @click="show = true"
        >点击选择执行人</view
      >
      <view v-if="data.status == '0'">
        <text
          v-for="(item, index) in selected"
          :key="index"
          style="color: #9197b0"
        >
          {{ index ? "，" : "" }} {{ item.label }}
        </text>
      </view>
      <view style="margin: 20rpx 0 10rpx 0" v-else>执行人：</view>
      <text v-if="data.status != '0'" style="color: #9197b0">
        {{ data.clr_name ? data.clr_name.replace(/,/g, "，") : "" }}
      </text>
      <textarea
        v-if="param.qkms || data.status != '2'"
        :disabled="data.status == '2'"
        placeholder-style="color:#B6BFC6"
        class="textarea"
        v-model="param.qkms"
        maxlength="200"
        placeholder="请输入备注"
      />
      <view class="wrap">
        <view class="item" v-for="(item, index) in param.files">
          <image class="image" @click="previewImage(index)" :src="item" />
          <image
            v-if="filesFlag && data.status == '0'"
            @click="fileDelete(index)"
            class="del"
            src="@/static/image/input_delete.png"
          />
        </view>
        <view
          class="item"
          v-if="data.status == '0'"
          @click="photo"
          style="border-radius: 12rpx"
        >
          <view style="display: block">
            <image src="@/static/image/photo_upload_gray.png" />
            <view
              style="
                font-size: 24rpx;
                line-height: 28rpx;
                color: #9197ae;
                text-align: center;
                margin-top: 0;
              "
              >添加图片</view
            >
          </view>
        </view>
        <view
          class="item"
          v-if="data.status == '2' || param.files.length % 3 > 0"
          style="background: white"
          v-for="item in (data.zxzt == '2' ? 2 : 3) - (param.files.length % 3)"
        />
      </view>
      <view
        class="foot_wrap"
        :style="{
          paddingBottom: ios ? 'env(safe-area-inset-bottom)' : '40rpx',
        }"
      >
        <view class="foot" v-if="data.status == '0'" @click="submit">
          提交
        </view>
        <view class="foot" style="background: #f8f8f8; color: #333333" v-else>
          已完成
        </view>
      </view>
    </view>
    <multiple-select
      v-model="show"
      :data="list"
      :default-selected="defaultSelected"
      @confirm="confirm"
    ></multiple-select>
  </view>
</template>

<script>
import API from "@/common/api.js";
import util from "@/common/util.js";
import multipleSelect from "@/components/momo-multipleSelect/momo-multipleSelect.vue";

var x_PI = (3.14159265358979324 * 3000.0) / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0; //卫星椭球坐标投影到平面地图坐标系的投影因子。
var ee = 0.00669342162296594323; //椭球的偏心率。
export default {
  components: { multipleSelect },
  data() {
    return {
      ios: uni.getStorageSync("ios"),
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      loginAccount: uni.getStorageSync("loginAccount"),
      modal: false,
      button: [
        {
          text: "确定",
          color: "#5677fc",
        },
      ],
      token: uni.getStorageSync("token"),
      fileDownloadUrl: uni.getStorageSync("fileDownloadUrl"),
      data: {},
      filesFlag: true,
      list: [], //用户
      defaultSelected: [], //默认选中用户
      selected: [], //选中用户
      show: false,
      param: {
        zcyc: "y",
        qkms: "",
        files: [],
      },
      ids: [],
      fhFlag: false,
      view: uni.getStorageSync("ios") ? this.$mp.page.$getAppWebview() : null,
      fault: {},
    };
  },
  onBackPress(e) {
    return this.fhFlag;
  },
  onLoad(options) {
    this.data = JSON.parse(uni.getStorageSync("inspectCompleteData"));
    if (this.data.status == "0") {
      this.getUser();
    }
    this.fault = {
      asset_sn: this.data.jhrw_sn || "",
      asset_mc: this.data.jhrw_sbmc || "",
      asset_id: this.data.jhrw_sb_id || 0,
    };
    uni.setStorage({
      key: "inspectCompleteData",
      data: false,
    });
    if (this.data.status == "2") {
      this.param.zcyc = this.data.zcyc;
      this.param.qkms = this.data.qkms;
      this.param.files = this.data.files;
    }
  },
  methods: {
    confirm(data) {
      this.selected = data;
    },
    getUser() {
      API.selectUserOptions({
        pzhAuthorization: this.pzhAuthorization,
        needNull: false,
        executionClass: "cn.scihi.zhgl.ucc.HtUcc",
        roleIds: "1141270155063418881",
      }).then((res) => {
        if (res.resCode == "success") {
          uni.hideLoading();
          res.datas.forEach((item) => {
            this.list.push({
              label: item.NAME,
              value: item.ACCOUNT,
            });
            if (item.ACCOUNT == this.loginAccount) {
              this.defaultSelected.push(item.ACCOUNT);
              this.selected.push({
                label: item.NAME,
                value: item.ACCOUNT,
              });
            }
          });
        }
      });
    },
    resetFault() {
      this.fault = {
        asset_sn: this.data.jhrw_sn || "",
        asset_mc: this.data.jhrw_sbmc || "",
        asset_id: this.data.jhrw_sb_id || 0,
      };
    },
    //故障单
    goInspectFault() {
      uni.setStorage({
        key: "inspectFaultData",
        data: JSON.stringify(this.fault),
      });
      uni.navigateTo({
        url: "./inspectFault",
      });
    },
    map() {
      console.log(
        parseFloat(this.data.jhrw_rwwd),
        parseFloat(this.data.jhrw_rwjd)
      );
      let li = this.wgs84_to_gcj02(
        parseFloat(this.data.jhrw_rwjd),
        parseFloat(this.data.jhrw_rwwd)
      );
      uni.openLocation({
        latitude: li[1],
        longitude: li[0],
        name: this.data.jhrw_zz || "", //目的地定位名称
        address: this.data.jhrw_rwdz || "", //导航详细地址
        success: function () {
          console.log("success");
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
    wgs84_to_gcj02(lng, lat) {
      var dlat = this.transformlat(lng - 105.0, lat - 35.0);
      var dlng = this.transformlng(lng - 105.0, lat - 35.0);
      var radlat = (lat / 180.0) * PI;
      var magic = Math.sin(radlat);
      magic = 1 - ee * magic * magic;
      var sqrtmagic = Math.sqrt(magic);
      dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
      dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
      var mglat = lat + dlat;
      var mglng = lng + dlng;

      return [mglng, mglat];
    },
    //转化经度
    transformlng(lng, lat) {
      var ret =
        300.0 +
        lng +
        2.0 * lat +
        0.1 * lng * lng +
        0.1 * lng * lat +
        0.1 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((150.0 * Math.sin((lng / 12.0) * PI) +
          300.0 * Math.sin((lng / 30.0) * PI)) *
          2.0) /
        3.0;
      return ret;
    },
    transformlat(lng, lat) {
      var ret =
        -100.0 +
        2.0 * lng +
        3.0 * lat +
        0.2 * lat * lat +
        0.1 * lng * lat +
        0.2 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((160.0 * Math.sin((lat / 12.0) * PI) +
          320 * Math.sin((lat * PI) / 30.0)) *
          2.0) /
        3.0;
      return ret;
    },
    //百度坐标转高德（传入经度、纬度）
    zbzh(bd_lng, bd_lat) {
      var X_PI = (Math.PI * 3000.0) / 180.0;
      var x = bd_lng - 0.0065;
      var y = bd_lat - 0.006;
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
      var gg_lng = z * Math.cos(theta);
      var gg_lat = z * Math.sin(theta);
      return { lng: gg_lng, lat: gg_lat };
    },
    fileDelete(index) {
      if (this.param.files[index].indexOf("&token") > -1) {
        this.ids.push(this.data.files[index].id);
        this.data.files.splice(index, 1);
      }
      this.param.files.splice(index, 1);
      if (this.param.files.length == 1) {
        this.filesFlag = false;
        setTimeout(() => {
          this.filesFlag = true;
        }, 10);
      }
    },
    submit() {
      if (this.param.zcyc == "n" && this.fault.gzms) {
        this.submitFault();
      } else {
        this.request();
      }
      return;
      uni.getLocation({
        type: "wgs84",
        success: (res1) => {
          this.request({ latitude: res1.latitude, longitude: res1.longitude });
        },
        fail: (err) => {
          this.request({ latitude: 0, longitude: 0 });
        },
      });
    },
    submitFault() {
      if (!this.selected || !this.selected.length) {
        uni.showToast({
          icon: "none",
          title: "请至少选择一个执行人",
          duration: 2000,
        });
        return;
      }
      uni.showLoading({
        mask: true,
      });
      let data = {
        xjgd_id: this.data.xjgd_id,
        gdh: this.data.gdh,
        jh_mc: this.data.jh_mc,
        scsj: this.data.scsj,
        kssj: this.data.kssj,
        asset_sn: this.fault.asset_sn || "无",
        asset_mc: this.fault.asset_mc || "无",
        asset_id: this.fault.asset_id,
        gzdj: this.fault.gzdj,
        gzlx: this.fault.gzlx,
        gzms: this.fault.gzms,
        bz: this.fault.bz,
        pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      };
      if (!this.fault.files.length) {
        API.insertGz(data).then((res) => {
          if (res.resCode == "success") {
            this.request();
          }
        });
        return;
      }

      let files = [];
      this.fault.files.map((value, index) => {
        if (value.indexOf("://125.66.234.97") < 0) {
          files.push(value);
        }
      });
      let imgs = files.map((value, index) => {
        return {
          name: "file",
          uri: value,
        };
      });
      // data.fileNum=imgs.length
      uni.uploadFile({
        url: util.getApiUrl() + "panzhihua/jsp/xjgl/insertGz.do",
        files: imgs,
        formData: data,
        success: (res) => {
          if (
            res.statusCode == 200 &&
            JSON.parse(res.data).resCode == "success"
          ) {
            this.request();
          }
        },
      });
    },
    request() {
      if (!this.selected || !this.selected.length) {
        uni.showToast({
          icon: "none",
          title: "请至少选择一个执行人",
          duration: 2000,
        });
        return;
      }
      uni.showLoading({
        mask: true,
      });
      let clr = "",
        clr_name = "";
      this.selected.forEach((item, index) => {
        clr += (index ? "," : "") + item.value;
        clr_name += (index ? "," : "") + item.label;
      });
      let data = {
        gd_id: this.data.gd_id,
        id: this.data.id,
        pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
        qkms: this.param.qkms,
        zcyc: this.param.zcyc,
        clr,
        clr_name,
      };
      console.log(data, 4545);
      if (!this.param.files.length) {
        API.updateGdRw(data).then((res) => {
          uni.hideLoading();
          if (res.resCode == "success") {
            uni.showToast({
              icon: "success",
              title: "操作成功",
              duration: 2000,
              mask: true,
            });
            setTimeout(() => {
              uni.navigateBack({
                //返回
                delta: 1,
              });
            }, 2000);
          }
        });
        return;
      }

      let files = [];
      this.param.files.map((value, index) => {
        if (value.indexOf("://125.66.234.97") < 0) {
          files.push(value);
        }
      });
      let imgs = files.map((value, index) => {
        return {
          name: "file" + index,
          uri: value,
        };
      });
      data.fileNum = imgs.length;
      console.log(data, "xxxx");
      uni.uploadFile({
        url: util.getApiUrl() + "panzhihua/jsp/xjgl/updateGdRw.do",
        files: imgs,
        formData: data,
        success: (res) => {
          if (
            res.statusCode == 200 &&
            JSON.parse(res.data).resCode == "success"
          ) {
            uni.hideLoading();
            uni.showToast({
              icon: "success",
              title: "操作成功",
              duration: 2000,
              mask: true,
            });
            setTimeout(() => {
              uni.navigateBack({
                //返回
                delta: 1,
              });
            }, 2000);
          }
        },
      });
    },
    photo() {
      uni.chooseImage({
        count: 100,
        sizeType: ["compressed", "original"], //可以指定是原图'original', 还是压缩图，默认二者都有
        success: (res) => {
          console.log(res);
          this.param.files = this.param.files.concat(res.tempFilePaths);
          this.$forceUpdate();
        },
        error: (e) => {
          console.log(e);
        },
      });
    },
    previewImage(index) {
      uni.previewImage({
        current: this.param.files[index], // 当前显示图片的http链接
        urls: this.param.files, // 需要预览的图片http链接列表
      });
    },
  },
};
</script>
<style lang="less">
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
<style lang="less" scoped>
/* #ifndef APP-NVUE */
body {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
text {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
}

page {
  background: #fff;
}

button {
  width: 100%;
}
/* #endif */
.content {
  background: white;
  padding: 32rpx 32rpx 200rpx 32rpx;
  font-size: 28rpx;
  width: calc(100vw - 64rpx);
  min-height: calc(100vh - 232rpx);
  textarea {
    background: #f5f6f9;
    border-radius: 22rpx;
    width: calc(100% - 40rpx);
    padding: 20rpx;
    margin-top: 32rpx;
  }
  .wrap {
    margin-top: 32rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .title {
      width: 100%;
      margin-bottom: 16rpx;
    }
    .item {
      margin-bottom: 32rpx;
      width: 196rpx;
      height: 136rpx;
      margin-right: 18rpx;
      background: #f5f6f9;
      .image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        display: block;
      }
      .del {
        width: 36rpx;
        height: 36rpx;
        right: -178rpx;
        top: -154rpx;
      }
      view {
        image {
          width: 48rpx;
          height: 48rpx;
          margin: 24rpx 0 0rpx calc(50% - 24rpx);
        }
      }
    }
  }
  .foot_wrap {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 32rpx);
    margin-left: -32rpx;
    background: white;
    padding: 40rpx 0 40rpx 32rpx;
    box-shadow: 0rpx -10rpx 32rpx 0rpx rgba(0, 0, 0, 0.06);
    .foot {
      width: calc(100vw - 64rpx);
      background: rgba(74, 125, 221, 1);
      margin-top: 24rpx;
      line-height: 76rpx;
      text-align: center;
      color: white;
      border-radius: 8rpx;
    }
  }
}
</style>
